﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hi嗨趣首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="css/mui.min.css">
    <style>
        html,
        body {
            background-color: #efeff4;
        }

        p {
            text-indent: 22px;
        }

        span.mui-icon {
            font-size: 14px;
            color: #007aff;
            margin-left: -15px;
            padding-right: 10px;
        }

        .mui-off-canvas-left {
            color: #fff;
        }

        .title {
            margin: 35px 15px 10px;
        }

            .title + .content {
                margin: 10px 15px 35px;
                color: #bbb;
                text-indent: 1em;
                font-size: 14px;
                line-height: 24px;
            }

        input {
            color: #000;
        }
    </style>
    <style>
        /*跨webview需要手动指定位置*/

        .mui-plus header.mui-bar {
            display: none !important;
        }

        .mui-plus .mui-bar-nav ~ .mui-content {
            padding: 0 !important;
        }

        .mui-plus .plus {
            display: inline;
        }

        .plus {
            display: none;
        }

        #topPopover {
            position: absolute;
            top: 14px;
            right: 6px;
        }

            #topPopover .mui-popover-arrow {
                left: auto;
                right: 6px;
            }

        p {
            text-indent: 22px;
        }

        span.mui-icon {
            font-size: 13px;
            color: #007aff;
            margin-left: -15px;
            padding-right: 10px;
        }

        .mui-popover {
            height: 180px;
        }

        /* .mui-content {
            padding: 10px;
        }*/
    </style>
</head>

<body>
    <div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
        <!--侧滑菜单部分-->
        <aside id="offCanvasSide" class="mui-off-canvas-left">
            <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <!-- <div class="title">侧滑导航</div> -->
                    <div class="content">

                        <p style="margin: 10px 10px;">
                            <button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">确认</button>
                        </p>

                    </div>
                    <div class="title" style="">目的地</div>
                    <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">

                        <li class="mui-input-row mui-checkbox">
                            <label>新加坡</label>
                            <input name="checkbox1" value="Item 3" type="checkbox">
                        </li>
                        <li class="mui-input-row mui-checkbox">
                            <label>日本</label>
                            <input name="checkbox1" value="Item 3" type="checkbox">
                        </li>
                        <li class="mui-input-row mui-checkbox">
                            <label>香港</label>
                            <input name="checkbox1" value="Item 3" type="checkbox">
                        </li>
                        <li class="mui-input-row mui-checkbox">
                            <label>马来西亚</label>
                            <input name="checkbox1" value="Item 3" type="checkbox">
                        </li>

                    </ul>

                    <div class="title" style="">游玩主题</div>
                    <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">

                        <li class="mui-input-row mui-checkbox">
                            <label>自然风光</label>
                            <input name="checkbox1" value="Item 3" type="checkbox">
                        </li>
                        <li class="mui-input-row mui-checkbox">
                            <label>都市夜景</label>
                            <input name="checkbox1" value="Item 3" type="checkbox">
                        </li>
                        <li class="mui-input-row mui-checkbox">
                            <label>亲子家庭</label>
                            <input name="checkbox1" value="Item 3" type="checkbox">
                        </li>
                        <li class="mui-input-row mui-checkbox">
                            <label>主题乐园</label>
                            <input name="checkbox1" value="Item 3" type="checkbox">
                        </li>
                        <li class="mui-input-row mui-checkbox">
                            <label>名胜古迹</label>
                            <input name="checkbox1" value="Item 3" type="checkbox">
                        </li>
                        <li class="mui-input-row mui-checkbox">
                            <label>自然风光</label>
                            <input name="checkbox1" value="Item 3" type="checkbox">
                        </li>
                        <li class="mui-input-row mui-checkbox">
                            <label>都市夜景</label>
                            <input name="checkbox1" value="Item 3" type="checkbox">
                        </li>
                        <li class="mui-input-row mui-checkbox">
                            <label>亲子家庭</label>
                            <input name="checkbox1" value="Item 3" type="checkbox">
                        </li>
                        <li class="mui-input-row mui-checkbox">
                            <label>主题乐园</label>
                            <input name="checkbox1" value="Item 3" type="checkbox">
                        </li>
                        <li class="mui-input-row mui-checkbox">
                            <label>名胜古迹</label>
                            <input name="checkbox1" value="Item 3" type="checkbox">
                        </li>
                    </ul>
                    <div class="content">

                        <p style="margin: 10px 10px;">
                            <button id="offCanvasHide2" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">确认</button>
                        </p>

                    </div>

                </div>
            </div>
        </aside>
        <!--主界面部分-->
        <div class="mui-inner-wrap">

            <header class="mui-bar mui-bar-nav ">
                <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
                <h1 class="mui-title">HiTravel</h1>
                <a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover"></a>
            </header>

            <!--           <header class="mui-bar mui-bar-nav">
                          <a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
                          <a class="mui-action-back mui-btn mui-btn-link mui-pull-right">关闭</a>
                          <h1 class="mui-title">div模式右滑菜单</h1>
                      </header> -->
            <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
                <div class="mui-scroll">
                    <div class="mui-content-padded">
                        <button id="offCanvasShow" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 10px;">
                            更多筛选
                        </button>

                    </div>


                    <div class="mui-card">
                        <div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(http://www.dcloud.io/hellomui/images/cbd.jpg)"></div>
                        <div class="mui-card-content">
                            <div class="mui-card-content-inner">
                                <p>Posted on January 18, 2016</p>
                                <p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>
                            </div>
                        </div>
                        <div class="mui-card-footer">
                            <a class="mui-card-link">$ 1.00元起</a>
                            <a class="mui-card-link">详情</a>
                        </div>
                    </div>

                    <div class="mui-card">
                        <div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(http://www.dcloud.io/hellomui/images/cbd.jpg)"></div>
                        <div class="mui-card-content">
                            <div class="mui-card-content-inner">
                                <p>Posted on January 18, 2016</p>
                                <p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>
                            </div>
                        </div>
                        <div class="mui-card-footer">
                            <a class="mui-card-link">$ 1.00元起</a>
                            <a class="mui-card-link">详情</a>
                        </div>
                    </div>

                    <div class="mui-card">
                        <div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(http://www.dcloud.io/hellomui/images/cbd.jpg)"></div>
                        <div class="mui-card-content">
                            <div class="mui-card-content-inner">
                                <p>Posted on January 18, 2016</p>
                                <p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>
                            </div>
                        </div>
                        <div class="mui-card-footer">
                            <a class="mui-card-link">$ 1.00元起</a>
                            <a class="mui-card-link">详情</a>
                        </div>
                    </div>

                    <div class="mui-card">
                        <div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(http://www.dcloud.io/hellomui/images/cbd.jpg)"></div>
                        <div class="mui-card-content">
                            <div class="mui-card-content-inner">
                                <p>Posted on January 18, 2016</p>
                                <p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>
                            </div>
                        </div>
                        <div class="mui-card-footer">
                            <a class="mui-card-link">$ 1.00元起</a>
                            <a class="mui-card-link">详情</a>
                        </div>
                    </div>
                    <div class="mui-card">
                        <div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(http://www.dcloud.io/hellomui/images/cbd.jpg)"></div>
                        <div class="mui-card-content">
                            <div class="mui-card-content-inner">
                                <p>Posted on January 18, 2016</p>
                                <p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>
                            </div>
                        </div>
                        <div class="mui-card-footer">
                            <a class="mui-card-link">$ 1.00元起</a>
                            <a class="mui-card-link">详情</a>
                        </div>
                    </div>
                    <div class="mui-card">
                        <div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(http://www.dcloud.io/hellomui/images/cbd.jpg)"></div>
                        <div class="mui-card-content">
                            <div class="mui-card-content-inner">
                                <p>Posted on January 18, 2016</p>
                                <p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>
                            </div>
                        </div>
                        <div class="mui-card-footer">
                            <a class="mui-card-link">$ 1.00元起</a>
                            <a class="mui-card-link">详情</a>
                        </div>
                    </div>
                    <div class="mui-card">
                        <div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(http://www.dcloud.io/hellomui/images/cbd.jpg)"></div>
                        <div class="mui-card-content">
                            <div class="mui-card-content-inner">
                                <p>Posted on January 18, 2016</p>
                                <p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>
                            </div>
                        </div>
                        <div class="mui-card-footer">
                            <a class="mui-card-link">$ 1.00元起</a>
                            <a class="mui-card-link">详情</a>
                        </div>
                    </div>
                    <div class="mui-card">
                        <div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(http://www.dcloud.io/hellomui/images/cbd.jpg)"></div>
                        <div class="mui-card-content">
                            <div class="mui-card-content-inner">
                                <p>Posted on January 18, 2016</p>
                                <p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>
                            </div>
                        </div>
                        <div class="mui-card-footer">
                            <a class="mui-card-link">$ 1.00元起</a>
                            <a class="mui-card-link">详情</a>
                        </div>
                    </div>



                    <form class="mui-input-group" style="margin-bottom: 15px; display:none;">
                        <div class="mui-input-row mui-radio">
                            <label>主界面移动、菜单不动</label>
                            <input name="style" type="radio" value="main-move">
                        </div>
                        <div class="mui-input-row mui-radio">
                            <label>主界面不动、菜单移动</label>
                            <input name="style" type="radio" checked="" value="menu-move">
                        </div>
                        <div class="mui-input-row mui-radio mui-hidden" id="move-togger">
                            <label>整体移动</label>
                            <input name="style" type="radio" value="all-move">
                        </div>
                        <div class="mui-input-row mui-radio">
                            <label>缩放式侧滑（类手机QQ）</label>
                            <input name="style" type="radio" value="main-move-scalable">
                        </div>
                    </form>

                </div>
            </div>
            <!-- off-canvas backdrop -->
            <div class="mui-off-canvas-backdrop"></div>
        </div>



    </div>


    <!--右上角弹出菜单-->
    <div id="topPopover" class="mui-popover">
        <div class="mui-popover-arrow"></div>
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        <a href="home.html">首页</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="#">登陆</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="#">购物车</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="#">个人中心</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="#">退出</a>
                    </li>

                </ul>
            </div>
        </div>

    </div>

    <script src="http://dcloud.io/hellomui/js/mui.min.js"></script>
    <script>
        mui.init();
        //侧滑容器父节点
        var offCanvasWrapper = mui('#offCanvasWrapper');
        //主界面容器
        var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
        //菜单容器
        var offCanvasSide = document.getElementById("offCanvasSide");
        if (!mui.os.android) {
            document.getElementById("move-togger").classList.remove('mui-hidden');
            var spans = document.querySelectorAll('.android-only');
            for (var i = 0, len = spans.length; i < len; i++) {
                spans[i].style.display = "none";
            }
        }
        //移动效果是否为整体移动
        var moveTogether = false;
        //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
        var classList = offCanvasWrapper[0].classList;
        //变换侧滑动画移动效果；
        mui('.mui-input-group').on('change', 'input', function () {
            if (this.checked) {
                offCanvasSide.classList.remove('mui-transitioning');
                offCanvasSide.setAttribute('style', '');
                classList.remove('mui-slide-in');
                classList.remove('mui-scalable');
                switch (this.value) {
                    case 'main-move':
                        if (moveTogether) {
                            //仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
                            offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
                        }
                        break;
                    case 'main-move-scalable':
                        if (moveTogether) {
                            //仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
                            offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
                        }
                        classList.add('mui-scalable');
                        break;
                    case 'menu-move':
                        classList.add('mui-slide-in');
                        break;
                    case 'all-move':
                        moveTogether = true;
                        //整体滑动时，侧滑菜单在inner-wrap内
                        offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
                        break;
                }
                offCanvasWrapper.offCanvas().refresh();
            }
        });
        //主界面‘显示侧滑菜单’按钮的点击事件
        document.getElementById('offCanvasShow').addEventListener('tap', function () {
            offCanvasWrapper.offCanvas('show');
        });
        //菜单界面，‘关闭侧滑菜单’按钮的点击事件
        document.getElementById('offCanvasHide').addEventListener('tap', function () {
            offCanvasWrapper.offCanvas('close');
        });
        //菜单界面，‘关闭侧滑菜单’按钮的点击事件
        document.getElementById('offCanvasHide2').addEventListener('tap', function () {
            offCanvasWrapper.offCanvas('close');
        });
        //主界面和侧滑菜单界面均支持区域滚动；
        mui('#offCanvasSideScroll').scroll();
        mui('#offCanvasContentScroll').scroll();
        //实现ios平台原生侧滑关闭页面；
        if (mui.os.plus && mui.os.ios) {
            mui.plusReady(function () { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
                plus.webview.currentWebview().setStyle({
                    'popGesture': 'none'
                });
            });
        }
    </script>
</body>

</html>